<script setup>
import { ref, reactive } from 'vue'
import uploadBtn from './uploadBtn.vue'
import upload from '@/components/app/upload.vue'
const props = defineProps({
	appletVisible: Boolean,
	default: false
})
const emits = defineEmits(['changeAppletVisible'])
const close = () => {
	emits('changeAppletVisible', false)
}
const appletForm = reactive({
	appletName: '',
	appid: '',
	appUrl: '',
	appImg: ''
})
const rules = reactive({
	appletName: [{ required: true, message: '小程序标题不能为空', trigger: 'blur' }],
	appid: [{ required: true, message: '请输入小程序ID', trigger: 'blur' }],
	appUrl: [{ required: true, message: '请输入小程序路径', trigger: 'blur' }],
	appImg: [{ required: true, message: '请输入小程序标题', trigger: 'blur' }]
})
</script>
<template>
	<el-dialog v-model="props.appletVisible" :center="true" title="添加小程序" width="610px" @close="close">
		<div class="model-box">
			<div class="blue-tips">
				<span class="icon-wrap"
					><i aria-label="icon: bell" class="anticon anticon-bell icon"
						><svg
							viewBox="64 64 896 896"
							focusable="false"
							class=""
							data-icon="bell"
							width="1em"
							height="1em"
							fill="currentColor"
							aria-hidden="true"
						>
							<path
								d="M816 768h-24V428c0-141.1-104.3-257.8-240-277.2V112c0-22.1-17.9-40-40-40s-40 17.9-40 40v38.8C336.3 170.2 232 286.9 232 428v340h-24c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h216c0 61.8 50.2 112 112 112s112-50.2 112-112h216c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM512 888c-26.5 0-48-21.5-48-48h96c0 26.5-21.5 48-48 48z"
							></path></svg></i
				></span>
				请填写企业微信后台绑定的小程序id和路径，否则会造成发送失败
			</div>
			<el-form
				ref="ruleFormRef"
				:model="appletForm"
				:rules="rules"
				label-width="125px"
				class="demo-ruleForm"
				status-icon
			>
				<el-form-item class="from-item" style="margin-bottom: 22px" label="小程序标题：" prop="appletName">
					<el-input v-model="appletForm.appletName" placeholder="请输入小程序标题" />
				</el-form-item>
				<el-form-item class="from-item" style="margin-bottom: 0" label="小程序appid：" prop="appid">
					<el-input v-model="appletForm.appid" placeholder="请输入小程序appid" />
				</el-form-item>
				<el-form-item class="from-item" style="margin-top: -5px; margin-bottom: 5px">
					<a
						href="https://weibanzhushou.com/help/2022/05/13/%e5%a6%82%e4%bd%95%e8%8e%b7%e5%8f%96%e5%b0%8f%e7%a8%8b%e5%ba%8fapp-id/read"
						target="_blank"
						>如何获取小程序的 appid
					</a>
				</el-form-item>
				<el-form-item class="from-item" label="小程序路径：" style="margin-bottom: 0" prop="appUrl">
					<el-input v-model="appletForm.appUrl" placeholder="请输入小程序路径" />
				</el-form-item>
				<el-form-item class="from-item" style="margin-top: -5px; margin-bottom: 8px">
					<a
						href="https://weibanzhushou.com/help/2022/05/13/%e5%a6%82%e4%bd%95%e8%8e%b7%e5%8f%96%e5%b0%8f%e7%a8%8b%e5%ba%8fapp-id/read"
						target="_blank"
						>如何获取小程序的路径
					</a>
				</el-form-item>
				<el-form-item class="from-item" label="小程序封面：" style="margin-bottom: 0" prop="appUrl">
					<upload :text="'上传封面'" />
				</el-form-item>
				<el-form-item class="from-item" style="margin-top: -5px; margin-bottom: 8px">
					<p class="title-size">建议尺寸：352*282 px</p>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<div>
					<el-button class="btn-cancal" @click="close">取消</el-button>
					<el-button class="btn-cancal" type="primary" @click="close"> 添加 </el-button>
				</div>
			</div>
		</template>
	</el-dialog>
</template>
<style lang="scss" scoped>
.btn-cancal {
	width: 74px;
	height: 32px;
}
.title-size {
	margin-top: 8px;
	color: #000000a6;
	font-size: 14px;
}
a {
	text-decoration: none;
	color: #1890ff;
}
.model-box {
	width: 100%;
	padding-left: 25px;
	.from-item {
		margin-left: -15px;
	}
	.blue-tips {
		padding: 8px 12px;
		background: #effaff;
		font-size: 13px;
		color: rgba(0, 0, 0, 0.65);
		line-height: 18px;
		margin-bottom: 24px;
		.icon-wrap {
			margin-right: 6px;
			font-size: 12px;
			color: #1890ff;
		}
	}
}
.dialog-footer {
	display: flex;
	justify-content: flex-end;
	width: 100%;
	padding-left: 25px;
}
</style>
